import PropTypes from 'prop-types'
import React, { memo, useRef, useState } from 'react'
import { RoomItemWrapper } from './style'
import { Rating } from '@mui/material'
import { Carousel } from 'antd'
import IconArrowLeft from '@/assets/svg/icon-arrow-left'
import IconArrowRight from '@/assets/svg/icon-arrow-right'
import Indicator from '@/base-ui/indicator'
import classNames from 'classnames'

const RoomItem = memo(({room, width = '25%', clickEvent}) => {
  const [currentIndex, setCurrentIndex] = useState(0) 
  const sliderRef = useRef()
  // 点击上一张下一张
  function controlClickHandle(isNext, e){
    e.stopPropagation()
    let index = currentIndex
    // 下一张
    if(isNext) {
      sliderRef.current.next()
      // 越界判断
      if(++index > room.picture_urls.length - 1) index = 0
    }
    // 上一张
    else {
      sliderRef.current.prev()
      // 越界判断
      if(--index < 0) index = room.picture_urls.length - 1
    }
    setCurrentIndex(index)
  }
  // 点击指示器跳转对应的页面
  function dotClickHandler(index){
    setCurrentIndex(index)
    sliderRef.current.goTo(index)
  }
  // 点击该组件事件处理
  function clickHandler(e){
    if(clickEvent) clickEvent(e, room)
  }
  // 如果只有一张图要显示
  const occupancy = (
    <div className='occupancy'>
      <img src={room.picture_url} alt="" />
    </div>
  )
  // 如果是有很多张图要显示
  const slider = (
    <div className='slider'>
      <div className='control'>
        <div className='btn left' onClick={e => controlClickHandle(false, e)}>
          <IconArrowLeft width="30" height="30"/>
        </div>
        <div className='btn right' onClick={e => controlClickHandle(true, e)}>
          <IconArrowRight width="30" height="30"/>
        </div>
      </div>
      <div className='indicator'>
          <Indicator currentIndex={currentIndex}>
            {room?.picture_urls?.map((item, index) => (
              <div key={item} className='dot-item' onClick={e => dotClickHandler(index)}>
                  <span className={classNames('dot', {active: currentIndex === index})}></span>
              </div>
            ))}
          </Indicator>
      </div>
      <Carousel ref={sliderRef} dots={false}>
        {
          room?.picture_urls?.map((img) => (
            <div className='occupancy' key={img}>
              <img src={img} alt="" />
            </div>
          ))
        }  
      </Carousel>
    </div>
  )

  return (
    <RoomItemWrapper 
      color = {room.verify_info.text_color} 
      width={width}
      onClick={clickHandler}
    >
      <div className='inner'>
          {
            room?.picture_urls ? slider : occupancy
          }
        <div className='desc'>
          {room.verify_info.messages.join(' · ')}
        </div>
        <div className='name'>{room.name}</div>
        <div className='price'>{room.price_format}/晚</div>
        <div className='bottom'>
        <Rating 
          value={room.star_rating ?? 5}
          precision={0.1}
          readOnly 
          sx={{ fontSize: "12px", color: "#00848A"}}
        />
          <span className='count'>{room.reviews_count}</span>
          { room.bottom_info && <span>·{room.bottom_info.content}</span>}
        </div>
      </div>
    </RoomItemWrapper>
  )
})

RoomItem.propTypes = {
  room: PropTypes.object, // 该组件所需room数据
  width: PropTypes.string // 该组件占父组件的百分比
}

export default RoomItem